<template>
	<view class="examine">
		<view class="select-box">
			<view @click="open" style="padding: 20rpx 20rpx 10rpx 20rpx">
				{{ selectTitle }}
				<icon-svg :icon-class="status ? 'icon-test4 ' : 'icon-test6'" />
			</view>
			<uni-popup ref="popup" type="top">
				<view class="popup-box">
					<view class="select-title">
						<text>{{ selectTitle }}</text>
						<icon-svg :icon-class="status ? 'icon-test4 ' : 'icon-test6'" />
					</view>
					<view class="select-list">
						<view v-for="(item, index) in selectList" :key="index" style="position: relative;">
							<uni-tag class="tags" circle inverted :type="currentIndex == index ? 'warning' : 'default'" :text="item.title" @click="handleSelect(item, index)"></uni-tag>
							<icon size="16" v-if="currentIndex == index" type="success_no_circle" color="#33B4C5"></icon>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view class="input-box"><input type="text" value="" style="margin-left:20rpx;" placeholder="搜索标题/单号或提交人" /></view>
		<view class="content-box">
			<view class="content-item" v-for="item in contentList" :key="item.index" @click="handleClick(item)">
				<view class="left"><uni-icons color="#bbb" size="35" type="contact-filled" /></view>
				<view class="center">
					<text>{{ item.name }}</text>
					<text>{{ item.title }}</text>
					<text style="color: #ccc;font-size: 30rpx;">{{ item.detail }}</text>
				</view>
				<view class="right">
					<text style="font-size: 28rpx;">{{ item.time }}</text>
					<text style="font-size: 36rpx;font-weight: bold;margin-top: 20rpx;">{{ item.money }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import uniTag from '@/components/uni-tag/uni-tag.vue';
export default {
	components: {
		uniPopup,
		uniIcons,
		uniTag
	},
	data() {
		return {
			currentIndex: 0,
			status: false,
			selectTitle: '全部',
			selectList: [{ title: '全部' }, { title: '报销单' }, { title: '借款单' }, { title: '申请单' }],
			contentList: [
				{ 'name': '陈赫斯提交', 'title': '上海出差报销', 'detail': 'B20000007 申请单2020', 'time': '14个小时前', 'money': '¥803.00', 'path': '/pages/mine/examineApply' },
				{ 'name': '陈赫斯提交', 'title': '北京出差报销', 'detail': 'B20000008 申请单2020', 'time': '2个月前', 'money': '¥1234.00', 'path': '/pages/mine/examineApply' },
				{ 'name': '陈赫斯提交', 'title': '深圳出差报销', 'detail': 'B20000009 申请单2020', 'time': '2个月前', 'money': '¥13.00', 'path': '/pages/mine/examineApply' },
				{ 'name': '陈赫斯提交', 'title': '上海出差报销', 'detail': 'B20000010 申请单2020', 'time': '2个月前', 'money': '¥3.00', 'path': '/pages/mine/examineApply' },
				{ 'name': '陈赫斯提交', 'title': '北京出差报销', 'detail': 'B20000011 申请单2020', 'time': '2个月前', 'money': '¥855.00', 'path': '/pages/mine/examineApply' },
				{ 'name': '陈赫斯提交', 'title': '深圳出差报销', 'detail': 'B20000012 申请单2020', 'time': '2个月前', 'money': '¥1,000.00', 'path': '/pages/mine/examineApply' }
			]
		};
	},
	methods: {
		open() {
			this.status = true;
			this.$refs.popup.open();
		},
		handleSelect(data, index) {
			this.selectTitle = data.title;
			this.currentIndex = index;
			this.$refs.popup.close();
			this.status = false;
		},
		handleClick(item) {
			console.log(item)
			let url = item.path+"?item="+encodeURIComponent(JSON.stringify(item))
			console.log('url:', url)
			uni.navigateTo({
				url: item.path+"?item="+encodeURIComponent(JSON.stringify(item))
			})
		}
	}
};
</script>

<style lang="scss">
.examine {
	background: #fff;
	.select-box {
		.popup-box {
			padding: 20rpx;
			background-color: #fff;
		}
		.select-list {
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			.tags {
				width: 200rpx;
				margin: 10rpx;
			}
			icon {
				position: absolute;
				top: 11px;
				right: 15px;
			}
		}
	}
	.input-box {
		background: #ebecee;
		border-radius: 30rpx;
		padding: 20rpx 60rpx;
		margin: 10rpx 30rpx;
	}
	.content-box {
		.content-item {
			padding: 20rpx;
			display: flex;
			.left {
				width: 10%;
			}
			.center {
				width: 60%;
				padding-left: 10rpx;
				text {
					display: block;
				}
			}
			.right {
				width: 30%;
				text {
					text-align: right;
					display: block;
				}
			}
		}
	}
}
</style>
